<template>
  <div class="p-d">
    <div class="wrap">
      <el-row class="top-card"> <StatusTop /> </el-row>
      <el-row :gutter="20" class="m-t">
        <el-col :span="12" class="p-l-0">
          <div class="bg-f p-d item-chart">
            <ChartsComp id="line" />
          </div>
        </el-col>
        <el-col :span="12" class="p-r-0">
          <div class="bg-f p-d item-chart">
            <ChartsComp id="line2" />
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="m-t">
        <el-col :span="12" class="p-l-0">
          <div class="bg-f p-d item-chart">
            <ChartsComp id="line3" />
          </div>
        </el-col>
        <el-col :span="12" class="p-r-0">
          <div class="bg-f p-d item-chart">
            <ChartsComp id="line4" />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import ChartsComp from "@/components/echart/charts.vue";
import StatusTop from "./common/statusTop.vue";
export default {
  name: "Home",
  components: {
    ChartsComp,
    StatusTop,
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.wrap {
  width: 100%;
  height: 100%;
  .top-card {
    height: 17vh;
  }
  .item-chart {
    height: 30vh;
  }
}
</style>
